<template>
  <view class="intent-page">
    <view class="text-area">
      <text class="label label--bold">输入值:</text>
      <input 
        type="text" 
        v-model="title" 
        class="input input--edit input--red"
        style="color: red;" 
      />
    </view>
    <view class="text-area text-area--mt">
      <text class="label label--bold">回传值:</text>
      <input 
        type="text" 
        :value="callBackValue" 
        class="input input--read-only input--blue"
        style="color: blue;" 
      />
    </view>
    <view class="child-container" style="margin-top: 50rpx;">
      <view class="child-wrap child-wrap--a">
        <comA :intent="title"></comA>
      </view>
      <view class="child-wrap child-wrap--b">
        <comB @callBackFun="CallBack"></comB>
      </view>
    </view>
  </view>
</template>

<script>
import comA from '../../../components/compA.vue'
import comB from '../../../components/compB.vue'
export default {
  components: { comA, comB },
  data() {
    return {
      title: '',
      callBackValue: ''
    }
  },
  methods: {
    CallBack(msg) {
      console.warn("父组件接收子B回传值：", msg);
      this.callBackValue = msg;
    }
  }
}
</script>

<style scoped>
.intent-page {
  padding: 100rpx 50rpx;
  background-color: #f5f5f5; /* 页面背景色，突出内容区 */
}
.text-area {
  display: flex;
  align-items: center;
  background-color: #fff; /* 白色背景框，区分输入区域 */
  padding: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); /* 轻微阴影，增强立体感 */
}
/* 上下区域间距加大，更易区分 */
.text-area--mt {
  margin-top: 30rpx;
}
.label {
  font-size: 28rpx;
  color: #333;
  width: 150rpx;
}
/* 标签加粗，更醒目 */
.label--bold {
  font-weight: 600;
  color: #222;
}
/* 输入框基础样式：大尺寸、粗边框 */
.input {
  flex: 1;
  padding: 20rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  border: 2rpx solid #ddd; /* 粗边框，更明显 */
}
/* 可编辑输入框：红色边框呼应文字色 */
.input--edit.input--red {
  border-color: #ff4d4f;
  background-color: #fff8f8; /* 浅红背景，强化识别 */
}
/* 只读回传框：黄色边框呼应文字色，灰色背景区分状态 */
.input--read-only.input--blue {
  border-color: #0055ff;
  background-color: #f0f7ff; /* 浅蓝背景，与蓝色边框/文字更协调 */
  pointer-events: none;
}
.child-container {
  display: flex;
  flex-direction: column;
  gap: 60rpx;
}
/* 子组件外层：深灰背景、粗边框、大padding */
.child-wrap {
  padding: 50rpx;
  background-color: #f0f0f0;
  border: 2rpx solid #ccc;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08); /* 明显阴影，突出层级 */
}
/* 子A/B可加轻微色差，更易区分兄弟组件 */
.child-wrap--a {
  border-left: 8rpx solid #1890ff; /* 左侧蓝条标识 */
}
.child-wrap--b {
  border-left: 8rpx solid #52c41a; /* 左侧绿条标识 */
}
</style>